<!-- directive:title 文字字号对齐 -->
<!-- directive:breadcrumb 文字字号对齐 -->
<div class="panel-body">
    <div class='panel panel-default'>
        <div class='panel-heading'> 文字字号对齐 </div>
        <div class='panel-body'>
            <div style="border: 1px solid red;padding: 0;line-height: 30px;">
                <span style="font-size:14px;">哈哦啊哦啊</span>
                <span style="font-size:12px;">哈哦啊哦啊</span>
                <span style="font-size:16px;">哈哦啊哦啊</span>
                <span style="font-size:19px;">哈哦啊哦啊</span>
                <span>line-height: 30px;</span>
            </div>
        </div>
        <div class='panel-body'>
            <div style="border: 1px solid red;padding: 0;display: flex;line-height: 30px;">
                <span style="font-size:14px;">哈哦啊哦啊</span>
                <span style="font-size:12px;">哈哦啊哦啊</span>
                <span style="font-size:16px;">哈哦啊哦啊</span>
                <span style="font-size:19px;">哈哦啊哦啊</span>
                <span>display: flex;line-height: 30px;</span>
            </div>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> 文本格式<em>text-align: justify;</em> </div>
        <div class='panel-body' >
            <div class="demo5555555555">
                <span>昵称</span>：<input type="text" style = 'width: 100px'><br><br>
                <span>电子邮箱</span>：<input type="email" style = 'width: 100px;'>
            </div>
            <style ui-bs>
                .demo5555555555 { height: 78px; }
                .demo5555555555 span{ width: 100px; text-align: justify; float: left; }
                .demo5555555555 span:after{ content:'.'; width: 100%; display: inline-block; overflow: hidden; height: 0; }
                .demo5555555555 input{ width: 100px; }
            </style>
        </div>
    </div>
</div>
